<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/basic/marketList">市场管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>编辑市场</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <el-form :model="categoryForm" label-width="90px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="区域">
              <el-cascader
                filterable
                class="fill-width"
                clearable
                v-model="categoryForm.areaSn"
                :options="areaList"
                :change-on-select="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场名称" required>
              <el-input v-model="categoryForm.marketName" style="float: left"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场类型">
              <el-select
                filterable
                v-model="categoryForm.marketType"
                style="float: left"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in markerTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="标签" required>
              <el-select
                class="fill-width"
                v-model="categoryForm.tags"
                multiple
                allow-create
                filterable
                placeholder="请填写标签"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" required>
              <el-input v-model="categoryForm.phone" maxlength="11" style="float: left"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标注位置" required>
              <p style="text-align: left">{{position.formattedAddress}}</p>
              <avue-map v-model="position" style="width:200px" :lnglat="lnglat"></avue-map>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="描述" required>
              <el-input v-model="categoryForm.description" type="textarea" style="float: left"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" required>
              <el-input v-model="categoryForm.remarks" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图片列表" required label-width="140px">
              <div
                v-if="categoryForm.photoList"
                class="thumbUrl"
                v-for="(item,index) in categoryForm.photoList"
              >
                <img :src="item.picUrl" />
                <div class="hover_show">
                  <i class="el-icon-delete" @click="handlePictureRemove(index)"></i>
                </div>
              </div>
              <div class="select_img" @click="sel_img()" style="float: left;">
                <i class="el-icon-plus"></i>
              </div>
              <div v-if="sleImg">
                <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
                  <sel-img-photogallery ref="selImg" type="10" @select="onSelectImgs"></sel-img-photogallery>
                </el-dialog>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div>
            <el-button type="primary" size="medium" @click="save">保存</el-button>
            <el-button type="default" size="medium" @click="close">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>

<script>
import selImgPhotogallery from "@/components/pds/common/sel_img_photogallery";
import { formatCascader, regionList } from "@/const/common/tool";
import { fetchDictAsync } from "@/util/util";
import { areaTree } from "@/api/crm/area";
import { marketEdit, getDetail } from "@/api/crm/marketmanage";
import { mapGetters } from "vuex";
import { fetchDict } from "@/util/util";
import AvueMap from "avue-plugin-map";
import Vue from "vue";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
        value: "value"
      },
      categoryForm: {
        photoList: [],
        position: ""
      },
      areaList: [],
      sleImg: false,
      //初始化坐标
      lnglat: {
        P: 29.563761,
        R: 106.55046400000003
      },
      position: {
        formattedAddress: "",
        addressComponent: {
          city: "",
          district: "",
          province: "",
          township: ""
        },
        longitude: "",
        latitude: ""
      },
      markerTypeList: []
    };
  },
  components: { selImgPhotogallery },
  computed: {
    ...mapGetters(["tagWel", "tagList", "tag", "website"]),
    tagLen() {
      return this.tagList.length || 0;
    }
  },
  mounted() {},
  created() {
    Vue.use(AvueMap);
    this.getList();
    // this.init();
    fetchDictAsync("scm_market_type", this.markerTypeList);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.init(vm.$route.query.res.marketSn));
  },
  methods: {
    init(marketSn) {
      let params = {
        marketSn:marketSn
      };
      // params.marketSn = JSON.parse(this.$route.query.res).marketSn;
      getDetail(params).then(response => {
        console.log(response);
        
        this.categoryForm = response.data.data;
        this.categoryForm.tags = this.categoryForm.tags
          ? this.categoryForm.tags.split(",")
          : [];
        this.position.formattedAddress = response.data.data.address;
        this.position.addressComponent.province = response.data.data.province;
        this.position.addressComponent.city = response.data.data.city;
        this.position.addressComponent.district = response.data.data.district;
        this.position.addressComponent.township = response.data.data.street;
        let tmp = response.data.data.position.split(",");
        this.lnglat = { P: Number(tmp[1]), R: Number(tmp[0]) };
      });
    },
    //获取区域
    async getList() {
      const query = {
        current: 1,
        size: 1000
      };
      let res = await areaTree(query);
      this.areaList = formatCascader(res.data.data, "areaName", "areaSn");
    },
    sel_img() {
      this.sleImg = true;
    },
    onSelectImgs(imgs) {
      imgs.forEach(item => {
        this.categoryForm.photoList.push({ id: item.id, picUrl: item.picUrl });
      });
      this.sleImg = false;
    },
    // 删除el-upload的图片
    handlePictureRemove(index) {
      this.categoryForm.photoList.splice(index, 1);
    },
    //确定
    save() {
      let tmp = [];
      this.categoryForm.photoList.forEach(item => {
        tmp.push(item.id);
      });
      this.categoryForm.photoList = tmp;
      this.categoryForm.tags = this.categoryForm.tags.join(",");
      if (
        Array.isArray(this.categoryForm.areaSn) &&
        this.categoryForm.areaSn.length > 0
      )
        this.categoryForm.areaSn = this.categoryForm.areaSn[
          this.categoryForm.areaSn.length - 1
        ];
      let params = this.categoryForm;
      params.position =
        this.position.longitude && this.position.latitude
          ? this.position.longitude + "," + this.position.latitude
          : "";
      params.province = this.position.addressComponent.province;
      params.city = this.position.addressComponent.city;
      if (regionList.includes(params.province)) {
        params.city = params.province;
      }
      params.district = this.position.addressComponent.district;
      params.street = this.position.addressComponent.township;
      params.address = this.position.formattedAddress;
      marketEdit(params).then(response => {
        if (response.data.code == 0) {
          this.$message.success("创建成功");
          let _this = this;
          setTimeout(function() {
            _this.close();
          }, 2000);
        } else {
          this.$message.success(response.data.msg);
        }
      });
    },
    close() {
      var str_before = location.href.split("#")[1];
      let { tag, key } = this.findTag(str_before);
      this.$store.commit("DEL_TAG", tag);
      this.$router.go(-1);
    },
    findTag(value) {
      let tag, key;
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    }
  }
};
</script>

<style scoped lang="scss">
.crumbs {
  margin: 20px 10px;
}
.table {
  width: 100%;
  font-size: 14px;
  background-color: #fff;
  text-align: left;
  border-top: 1px solid #e7e7eb;
  border-bottom: 1px solid #e7e7eb;
  border-spacing: 0;
}
.thumbUrl {
  width: 150px;
  height: 150px;
  position: relative;
  line-height: 146px;
  float: left;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #c0ccda;
  text-align: center;
}
.thumbUrl img {
  width: 100%;
  height: 100%;
}
.thumbUrl .hover_show {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: none;
}
.thumbUrl:hover .hover_show {
  display: block;
}
.thumbUrl .hover_show i {
  color: #fff;
  margin: 0 10px;
  cursor: pointer;
}
.select_img {
  width: 148px;
  height: 148px;
  line-height: 146px;
  border: 1px dashed #c0ccda;
  background-color: #fbfdff;
  text-align: center;
  font-size: 28px;
  color: #8c939d;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
}
</style>


